$(function(){
    ko.bindingHandlers.jqDroppableList = {
        init: function(element, valueAccessor, allBindingsAccessor){
            var options = kjq.utils.getOptions(allBindingsAccessor);
            if(!valueAccessor().list){
                $(element).droppable(options);
                return;
            }
            var source = valueAccessor().list;
            var contentList = ko.bindingHandlers.jqDraggableList.getSourceListComponent(source());
            contentList.droppable({
                accept: ".kjq-drop-zone"
            });
            $(element).append(contentList);
            
        },
        
        getSourceListComponent: function(list, sourceClass){
            var componentId = kjq.utils.getRandomElementId();
            var content = '<ul id="'.concat(componentId,'" class="kjq-selectable-list">');     
            for(var x=0;x<list.length;x++){
                var listElement = '<li class="ui-state-default kjq-selectable-list ui-widget-content kjq-draggable">'.concat(list[x].toString(),'</li>');
                content = content.concat(listElement);
            }
            content.concat('</ul>');
            return $(content);
        }
    }
});